<template>
	<view>
		<view class="search-view">
			<image src="../../static/coen/dingwei.svg" mode="widthFix"></image>
			<text @click="chooseLocation" class="serch-text">{{ addressData.addressName }}</text>
			<text>></text>
		</view>
		<view class="search" @click="seaRch()">
			<image src="../../static/inster/baofan.png"></image>
			<input type="text" value="" placeholder="上门维修" disabled/>
		</view>
		<!--自定义轮播 -->
		<view class="swiper-view">
			<swiper  :autoplay="false" :interval="2000" :duration="1000">
				<block v-for="(item,index) in lable" :key="index">
				<swiper-item>
					<view class="swiper-item">
						<block v-for="(listdata,index2) in item" :key="'index'+index2">
						<view class="conteng-img"  @click="toNextpage(index,index2)">
							<image :src="listdata.img" mode="widthFix" class="uploadimg"></image>
							<text>{{listdata.title}}</text>
						</view>
						</block>
					</view>
				</swiper-item>
				</block>
			</swiper>
			<!-- 指示点 -->
			<view class="instruct-view">
				<block v-for="(item, index) in instructdata" :key="index">
				<view class="instruct" :class="{active:index == num}">{{item}}</view>
				</block>
			</view>			
		</view>
		
		<view class="title">秒杀活动中</view>
		<scroll-view scroll-x="true" class="scroll">
			<view class="sview" v-for="(litem,lindex) in l3" :key="lindex">
				<image :src="litem.sProduct.img"></image>
				<view>{{litem.sProduct.serviceName}}</view>
				<view class="price">原价:{{litem.sProduct.servicePrice}}</view>
				<view class="price">秒杀价格：{{litem.currentPrice}}</view>
			</view>
		</scroll-view>		
		
		<view class="title">为你优选</view>		
		<scroll-view scroll-x="true" class="scroll">
			<view class="sview" v-for="(litem,lindex) in l1" :key="lindex">
				<image :src="litem.img" @click="takEoute(litem)"></image>
				<view>{{litem.serviceName}}</view>
				<view class="price">{{litem.servicePrice}}</view>
			</view>
		</scroll-view>	
				
		<view class="title">服务商家</view>		
		<view ref="ListConS" class="sticke functions">
			<view @tap="bindsorts(1)">综合排序</view>
			<view @tap="Ranking(1)">销量高</view>
			<view @tap="Ranking(2)">评价高</view>
			<view @tap="Ranking(3)">津贴联盟</view>
			<view @tap="bindscreen(1)">筛选</view>
		</view>
		
		
		<view class="list" v-for="(l2it,l2in) in l2" :key="l2in">
			<view @click="takEout(l2it.storeId)"><image class="logo" :src="l2it.img"></image></view>
			<view class="info" @click="takEout(l2it.storeId)">
				<view class="name">
					{{l2it.storeName}}
				</view>
				<view class="h1">
					<view>月售{{l2it.salenum}}</view>
					<view>距离{{l2it.distance}}km</view>
				</view>
				<view class="h2">
					<view>商圈:{{l2it.circlessName}}</view>
					<view>评分:{{l2it.storeScore}}</view>
					<view>人均￥{{l2it.capita}}</view>
				</view>
				<view class="h2">{{l2it.storeType}}</view>
			</view>
		</view>
		
		<view class="layer" style="z-index:99;" v-if="sorts" @touchmove.stop.prevent="stop">
			<view class="layer_back" @tap="bindsorts(2)"></view>
			<view class="layer_con" style="min-height:34vh;">
				
				<view class="functions">
					<view @tap="bindsorts(1)">综合排序</view>
					<view @tap="Ranking(1)">销量高</view>
					<view @tap="Ranking(2)">评价高</view>
					<view @tap="Ranking(3)">津贴联盟</view>
					<view @tap="bindscreen(1)">筛选</view>
				</view>
				
				<view class="sorts_li" style="color:#F0AD4E;">综合排序</view>
				<view class="sorts_li">距离从近到远</view>
				<view class="sorts_li">人均高到低</view>
				<view class="sorts_li">人均低到高</view>
			</view>
		</view>

		
		<view class="layer" style="z-index:99;" v-if="screen" @touchmove.stop.prevent="stop">
			<view class="layer_back" @tap="bindscreen(2)"></view>
			<view class="layer_con" style="height:800upx;">
				<view style="height:720upx;">
					<view class="functions">
						<view @tap="bindsorts(1)">综合排序</view>
						<view @tap="Ranking(1)">销量高</view>
						<view @tap="Ranking(2)">速度快</view>
						<view @tap="Ranking(3)">津贴联盟</view>
						<view @tap="bindscreen(1)">筛选</view>
					</view>
					
					<view>
						<view class="screen_title">商家特色（多选）</view>
						<view class="screen_con">
							<view>24小时服务</view>
							<view>上门服务</view>
							<view>免预约</view>
						</view>
					</view>
					<view>
						<view class="screen_title">人均价</view>
						<view class="screen_con">
							<view>20元</view>
							<view>20-40元</view>
							<view>40元以上</view>
						</view>
					</view>
				</view>
				<view class="screen_btn">
					<view>清空</view>
					<view style="background-color:#F0AD4E;">完成</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressData: {
					name: '',
					mobile: '',
					addressName: '成都市武侯区蜗牛学院',
					address: '',
					default: false,
					note: '',
				},
				addressId:'',								
				num:0,
				// 面板指示点
				instructdata:['',''],
				// 轮播数组
				lable: [
					[
					{img:'https://tangcong.oss-cn-chengdu.aliyuncs.com/%E8%9C%97%E7%89%9B%E5%AD%A6%E9%99%A2.png',title:'蜗牛学院'},
					{img:'https://tangcong.oss-cn-chengdu.aliyuncs.com/%E5%AE%B6%E7%94%B5%E7%BB%B4%E4%BF%AE.png',title:'家电维修'},
					{img:'https://tangcong.oss-cn-chengdu.aliyuncs.com/%E6%B4%97%E8%A1%A3%E6%9C%8D%E5%8A%A1.png',title:'衣物洗护'},
					{img:'../../static/inster/meituan.png',title:'美团专送'},
					{img:'https://tangcong.oss-cn-chengdu.aliyuncs.com/%E8%B7%91%E8%85%BF%E8%BD%AC%E9%80%81.png',title:'跑腿代购'},
					{img:'https://tangcong.oss-cn-chengdu.aliyuncs.com/%E5%AE%B6%E6%94%BF%E6%9C%8D%E5%8A%A1.png',title:'家政服务'},
					{img:'https://tangcong.oss-cn-chengdu.aliyuncs.com/%E4%BA%8C%E6%89%8B%E4%BA%A4%E6%98%93.png',title:'热门二手'},
					{img:'https://tangcong.oss-cn-chengdu.aliyuncs.com/%E7%A4%BE%E5%8C%BA%E8%AE%BA%E5%9D%9B.png',title:'社区论坛'},
					{img:'https://tangcong.oss-cn-chengdu.aliyuncs.com/%E6%B1%BD%E8%BD%A6%E7%BB%B4%E4%BF%AE.png',title:'养车用车'},
					{img:'https://tangcong.oss-cn-chengdu.aliyuncs.com/%E6%90%AC%E5%AE%B6%E6%9C%8D%E5%8A%A1.png',title:'货拉拉'},
				],
				[
					{img:'../../static/inster/meishi.png',title:'附件餐饮'},
					{img:'../../static/inster/chaoshi.png',title:'超市购物'},
					{img:'../../static/inster/shuiguo.png',title:'水果专送'},
					{img:'../../static/inster/meituan.png',title:'美团专送'},
					{img:'../../static/inster/paotui.png',title:'跑腿代购'},
					{img:'../../static/inster/yexiao.png',title:'附件美食'},
					{img:'../../static/inster/jintie.png',title:'最新资讯'},
					{img:'../../static/inster/pinping.png',title:'娱乐社区'},
					{img:'../../static/inster/shaokao.png',title:'客户联系'},
					{img:'https://tangcong.oss-cn-chengdu.aliyuncs.com/%E5%8F%B8%E6%9C%BA%E6%8E%A5%E5%8D%95.png',title:'司机接单'},
				]
				],
				l1:[],
				l2:[],
				l3:[],
				rect:'',
				topdata:'',
				pollscoll:'',				
				screen:false,
				sorts:false,
			}
		},
		onLoad() {
			uni.request({
				url: this.baseurl+'sProduct/find',
				method: 'GET',
				success: res => {
					this.l1=res.data.data;
				}
			});
			uni.request({
				url: this.baseurl+'sSeckill/all',
				method: 'GET',
				success: res => {
					this.l3=res.data.data;
				}
			});			
			uni.request({
				url: this.baseurl+'sStore',
				method: 'GET',
				success: res => {
					this.l2=res.data.data;
				}
			});
		},
		methods: {	
			//跳转到秒杀页面		
			//地图选择地址
			chooseLocation() {
				uni.chooseLocation({
					success: data => {
						this.addressData.addressName = data.name;
						this.addressData.address = data.name;
					}
				});
			},
			Ranking(){
				uni.createSelectorQuery().select(".sticke").boundingClientRect((res)=>{
					uni.pageScrollTo({duration:200,scrollTop:680})
				}).exec()
			},
			bindsorts(e){
				if(e==1){
					uni.createSelectorQuery().select(".sticke").boundingClientRect((res)=>{
						uni.pageScrollTo({duration:200,scrollTop:680})
					}).exec()
				}
				var that=this;
				setTimeout(function(){
					that.sorts=!that.sorts;
				},300)
			},
			bindscreen(e){
				if(e==1){
					uni.createSelectorQuery().select(".sticke").boundingClientRect((res)=>{
						uni.pageScrollTo({duration:200,scrollTop:680})
					}).exec()
				}
				var that=this;
				setTimeout(function(){
					that.screen=!that.screen;
				},300)
			},
			stop(){
			},

			takEout(id){
				console.log(id)
				wx.navigateTo({
					url:'../info/info?id=' + id
				})
			},
			//页面跳转
			toNextpage(id,pid){
				console.log('第'+id+1+'页点击触发了图标'+pid);
				switch(id){
				case 0:
				if(pid==3){//美团的
				uni.navigateTo({
					url:'../flashex/flashex'
				})	
				};
				 if(pid==9){//货拉拉
				uni.navigateTo({
					url:'../movehouse/list'
				})	
				};
				 if(pid==7){
					uni.switchTab({
						url:"../comm/comm"
					})
				}
				//第一页的判断终止
				break;
				case 1:
				if(pid==3){//美团的
				uni.navigateTo({
					url:'../flashex/flashex'
				})	
				};
				 if(pid==9){//货拉拉司机接单
				uni.navigateTo({
					url:'../movehouse/dirver/dirver'
				})	
				};
				 if(pid==7){
					uni.switchTab({
						url:"../comm/comm"
					})
				}
				//第二页的判断终止
				break;
				};
			},
			takEoute(litem){
				console.log('首页',litem)
				uni.navigateTo({
					url:'../info/servicedetail?serviceId=' + litem.serviceId
				})
			},
			// 到搜索页面
			seaRch(){
				wx.navigateTo({
					url:'../index/search'
				})
			}
		}
	}
</script>

<style>
/* 轮播 */
		
	swiper{height: 380upx !important;}
	/* 九宫格 */
	.swiper-item{display: flex; flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	height: 380upx;
	}
	.conteng-img{width: calc((100% / 5) - 12px) !important;
	margin: 6px;
	/* height: 120upx; */
	position: relative;
	text-align: center;
	}
	.conteng-img text{padding-top: 20upx; font-size: 25upx;}
	.uploadimg{width: 70upx;
	height: 70upx;
	border-radius: 50upx;
	display: block;
	margin: 0 auto;
	}
	/* 指示点 */
	.instruct-view{display: flex; justify-content: center; padding-top: 10upx;}
	.instruct{background: #e6e6e6; height: 10upx; width: 30upx; border-radius: 50upx;
	margin: 0 10upx;
	}
	.active{background: #fbae22 !important;}
/* 定位 */
.search-view image{width: 35upx;height: 35upx;}
.search-view{font-size: 30upx;font-weight: bold;display: flex;align-items: center;
height: 80upx;}
.serch-text{padding:10upx;}
.address{font-size:30upx;font-weight:bold;padding:10upx;}
.search{width:720upx;height:70upx;background-color:#eff3f4;border-radius:10upx;margin:0 auto;display:flex;}
.search image{width:30upx;height:30upx;margin:20upx;}
.search input{height:70upx;font-size:30upx;}

.nav{display:flex;flex-wrap:wrap;padding:10upx;}
.nav_li{width:120upx;height:116upx;margin:12upx;font-size:24upx;text-align:center;}
.nav image{width:70upx;height:70upx;}

.title{font-size:34upx;margin:20upx;}
.scroll{white-space: nowrap;width:730upx;margin:20upx;font-size:30upx;}
.sview{display: inline-block;width: 300upx;height: 300upx;padding:8upx;margin-right:10upx;}
.sview image{width:300upx;height:200upx;}
.price{font-size:26upx;color:#9f9f9f;}

.list{display: flex;margin:20upx;border-bottom:2upx solid #999999;}
.logo{width:200upx;height:180upx;}
.info{width:500upx;margin:0 20upx;}
.name{font-size:28upx;font-weight:bold;color:#333333;line-height:44upx;}
.h1{display:flex;justify-content:space-between;font-size:20upx;color:#333333;line-height:44upx;}
.h2{display:flex;font-size:20upx;color:#333333;line-height:44upx;}
.h2 view{margin-right:30upx;}


.layer{position:fixed;left:0;top:0;right:0;bottom:0;z-index:99;}
.layer_back{position:fixed;top:0;width:100%;height:100%;z-index:1;background-color:rgba(0, 0, 0, 0.4);}
.layer_con{position:fixed;z-index:99;top:88upx;width:100%;background-color:#FFFFFF;}

.functions{display:flex;font-size:26upx;line-height:80upx;}
.functions view{width:130upx;text-align:center;}
.functions view:nth-last-child(1){margin-left:100upx;}
.sorts_li{font-size:28upx;padding:20upx;border-top:2upx solid #999999;}

.screen_title{padding:20upx;font-size:30upx;font-weight:bold;}
.screen_con{display:flex;justify-content:space-around;font-size:28upx;}
.screen_con view{width:200upx;line-height:60upx;text-align:center;background-color:#EFF3F4;}
.screen_btn{position: relative;bottom: 0;display:flex;height:80upx;}
.screen_btn view{width:375upx;height:80upx;border:2upx solid #C8C7CC;
	text-align: center;line-height:80upx;font-size:34upx;}
</style>
